<html>
<head>
  <base href="">
  <style class="fcc-hide-header">
    head *, title, meta, link, script {
      display: none !important;
    }
  </style>
  <meta charset="UTF-8">
  <meta content="width=device-width, initial-scale=1.0" name="viewport">
  <title>Theme Switcher</title>
  <link href="styles.css" rel="stylesheet">

</head>


<body class="theme-light">
<button aria-controls="theme-dropdown" aria-expanded="false" aria-haspopup="true" class="dropdown-btn"
        id="theme-switcher-button">
  Switch Theme
</button>

<ul aria-labelledby="theme-switcher-button" class="dropdown-content" hidden="" id="theme-dropdown" role="menu">
  <li class="dropdown-item" id="theme-light" role="menuitem">Light</li>
  <li class="dropdown-item" id="theme-dark" role="menuitem">Dark</li>
  <li class="dropdown-item" id="theme-ocean" role="menuitem">Ocean</li>
  <li class="dropdown-item" id="theme-nord" role="menuitem">Nord</li>
</ul>

<div aria-live="polite" id="status"></div>

<script src="script.js"></script>

</body>
</html>